<template>
  <el-form :model="cardForm" :label-width="100" status-icon>
    <!-- 动态课时卡下拉 -->
    <el-form-item label="课时卡选择">
      <el-select
        v-model="cardForm.cardId"
        placeholder="-请选择绑定的课时卡-"
        size="large"
        style="width: 100%"
        :loading="loading"
      >
        <el-option
          v-for="item in cardList"
          :key="item.cardId"
          :label="item.cardName"
          :value="item.cardId"
        />
      </el-select>
    </el-form-item>

    <!-- 充值次数 -->
    <el-form-item label="充值次数">
      <el-input-number v-model="cardForm.validCount" :min="1" controls-position="right" class="w50" />
    </el-form-item>

    <!-- 有效期 -->
    <el-form-item label="有效期">
      <el-input-number v-model="cardForm.validDay" :min="1" controls-position="right" class="w50" />
    </el-form-item>

    <!-- 实收金额 -->
    <el-form-item label="实收金额">
      <el-input v-model="cardForm.receivedMoney" placeholder="金额" class="w50">
        <template #prepend>￥</template>
        <template #append>元</template>
      </el-input>
    </el-form-item>

    <!-- 支付方式 -->
    <el-form-item label="支付方式">
      <el-select v-model="cardForm.payMode" placeholder="-请选择支付方式-" size="large" style="width: 100%">
        <el-option
          v-for="item in payModeList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>

    <!-- 备注 -->
    <el-form-item label="备注">
      <el-input v-model="cardForm.note" type="textarea" />
    </el-form-item>

    <!-- 按钮 -->
    <el-form-item>
      <el-button type="danger" @click="bindConfirm">确认</el-button>
      <el-button @click="cancelForm">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

// 父组件传值
const { cardForm, active, drawer, editMemberDrawer } = defineProps(['cardForm', 'active', 'drawer', 'editMemberDrawer'])
const $emit = defineEmits(['update:active', 'update:drawer', 'update:editMemberDrawer'])

// 动态卡片列表
const cardList = ref([])
const loading = ref(false)

// 支付方式列表（仍然使用本地）
const payModeList = [
  { value: '1', label: '支付宝' },
  { value: '2', label: '微信' },
  { value: '3', label: '现金' },
  { value: '4', label: '银行卡' },
]

// 加载课时卡数据
const loadCardList = async () => {
  loading.value = true
  try {
    const res = await axios.get('http://localhost:8080/api/class-cards')
    cardList.value = Array.isArray(res.data) ? res.data : res.data.data
  } catch (err) {
    ElMessage.error('课时卡加载失败')
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadCardList()
})

// 确认绑定
const bindConfirm = () => {
  console.log('===绑定会员卡确认===')
  $emit('update:active', 3) // 跳转到第三步“完成”
}

// 取消按钮
const cancelForm = () => {
  $emit('update:drawer', false)
  $emit('update:editMemberDrawer', false)
}
</script>

<style scoped lang="less">
.w50 {
  width: 45%;
}
</style>
